<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			<div @click="show = true" class="more">
				<img src="../../static/img/icon/find_icon/more.png" style="width: 20px;height: 5px;"/>
			</div>
		</div>
		<div class="header-null"></div>
		<div class="forum">
			<div class="forum-title">
				<div class="forum-title-name">
					{{info.note_name}}
				</div>
				<div class="forum-title-content">
					<div>
						<img v-lazy="info.head_portrait"/>
					</div>
					<div>
						<div>{{info.user_name}}</div>
						<div>2018年01月05日</div>
					</div>
					<span v-if="!isFollow" @click="follow">关注</span>
					<span class="active" v-else @click="cancel">已关注</span>
				</div>
				<div class="forum-title-label" v-if="tag">
					<div>#{{tag.name}}#</div>
				</div>
				<div class="forum-title-label" v-else-if="topic">
					<div>#{{topic.tName}}#</div>
				</div>
			</div>
			<div class="forum-content">
				<div class="forum-content-title" v-html="info.note_content">
					<!--2017啊发顺丰的地方的许先生的胜多负少的观点是实打实地方斯蒂芬萨达速度大V嘘嘘想擦爽肤水的感受到卡上房间爱看韩剧卡是否-->
				</div>
				<div class="forum-content-imgs">
					<img :src="item" v-for="(item, index) in imgs"/>
				</div>
			</div>
		</div>
		<div class="forum-comment" v-if="list.length != 0">
			<div class="forum-comment-header">
				<img src="../../static/img/icon/find_icon/comment@2x.png"/>
				<div>全部评论（{{info.comment_count}}）</div>
			</div>
			<div class="forum-comment-list">
				<div class="forum-comment-list-item" v-for="(item, index) in list" v-if="index < 6" @tap="commentItem(item)">
					<div>
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@2x.png"/>
					</div>
					<div>
						<div class="item-title">{{item.user_name}}</div>
						<div class="item-date">{{item.time}}</div>
						<div class="item-huifu" v-if="item.type == 2">
							回复{{item.pcUserName}}：{{item.content}}
						</div>
						<div class="item-huifu" v-else>
							{{item.content}}
						</div>
						<div class="item-item-child" v-if="item.type == 2">
							{{item.pcUserName}}：{{item.pContent}}
						</div>
					</div>
				</div>
			</div>
			<div class="forum-commentMore" @tap="route('commentMore', $route.params.id, info.note_type)">
				查看更多评论
			</div>
		</div>
		<div class="forum-comment">
			<div class="fixed-comment-null"></div>
		</div>
		<div class="fixed-comment">
			<div class="fixed-comment-value">
				<div @click="dialog = true">写评论</div>
			</div>
			<div class="fixed-comment-num">
				<div>
					<img src="../../static/img/icon/find_icon/comment@2x.png"/>
					<div>{{info.comment_count || 0}}</div>
				</div>
				<div @click="collect">
					<img src="../../static/img/icon/find_icon/collection@2x.png" v-if="!collectShow"/>
					<img src="../../static/img/icon/find_icon/collection_faxian@3x.png" v-else/>
					<div>{{info.collect_count || 0}}</div>
				</div>
				<div>
					<img src="../../static/img/icon/find_icon/heart_luntan@2x.png" v-if="!likeShow" @click="like"/>
					<img src="../../static/img/icon/find_icon/heart_xuanzhong_luntan@3x.png" v-else/>
					<div>{{info.like_count || 0}}</div>
				</div>
			</div>
		</div>
		<v-share :dialog="show" @hide="show = false"></v-share>
		<v-common :dialog="dialog" @hide="hide" :id="id" @submit="submit" :placeholder="commonName"></v-common>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	import VCommon from '../base/v-common'
	import VShare from '../base/v-share'
	export default {
		data() {
			return {
				show: false,
				isFollow: false,
				info: {},
				imgs: [],
				tag: {},
				commentNum: {},
				topic: {},
				dialog: false,
				commonName: '我也来评论两句',
				collectShow: false,
				likeShow: false,
				list: [],
				id: null
			}
		},
		components: {
			VCommon,
			VShare
		},
		methods: {
			init() {  //默认加载
				this.$store.state.isLoading = true
				getData('/note/appFindNotById', {
					token: sessionStorage.token,
					noteId: this.$route.params.id
				}).then(d => {
					this.$store.state.isLoading = false
					this.info = d.note
					this.imgs = d.note.img_path.split(';')
					this.tag = d.tag
					this.commentNum = d.isLikeCollectComment
					this.isFollow = d.isLikeCollectComment.isfollow == 0 ? false : true;
					this.topic = d.topic
					getData('/comment/appCommentList', {
						noteType: this.info.note_type,
						page: 1,
						pdId: this.info.note_id
					}).then(d => {
						d.object.list.map(x => {
							let date = new Date(x.time)
							x.time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours()+ ':' +date.getMinutes()+ ':' +date.getSeconds();
						})
						this.list = d.object.list
					})
				}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})
			},
			commentItem(item) {  //子评论
				this.commonName = "回复" + item.user_name + ":"
				this.id = item.com_id
				this.dialog = true
			},
			like() { //点赞
				getData('/like/appToLike', {
					token: sessionStorage.token,
					pdId: 1,
					noteType: 6
				}).then(d => {
					if(d.code == 100) {
						this.likeShow = true
					}
				})
			},
			collect() { //收藏
				getData('/collect/appAddCollect', {
					token: sessionStorage.token,
					noteId: this.info.note_id,
					type: this.info.note_type
				}).then(d => {
					if(d.code == 100) {
						this.collectShow = true
						this.info.collect_count += 1
					}
				})
			},
			hide() { //隐藏
				this.dialog = false
			},
			submit(content, id) { //评论
				this.$store.state.isLoading = true
				getData('/comment/appAddComment', {
					token: sessionStorage.token,
					content: content,
					pdId: this.info.note_id,
					noteType: this.info.note_type,
					pid: id
				}).then(d => {
					this.$store.state.isLoading = false
					if(d.code == 100) {
						mui.toast(d.msg)
						this.dialog = false
					}
				}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})	
			},
			follow() { //关注
				getData('/follow/appAddFollow', {
					token: sessionStorage.token,
					userId: this.info.user_id
				}).then(d => {
					if(d.code == 100) {
						mui.toast(d.msg)
						this.isFollow = true							
					}
				})
			},
			cancel() { //取消关注
				getData('/follow/appDeleteFollow', {
					token: sessionStorage.token,
					userId: this.info.user_id
				}).then(d => {
					if(d.code == 100) {
						mui.toast(d.msg)
						this.isFollow = false							
					}
				})
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style scoped lang="less">
	.forum {
		padding: 10px;
		background: #fff;
		
		.forum-title {
			border-bottom: 1px solid #e5e5e5;
			
			.forum-title-name {
				font-size: 15px;
				font-weight: bold;
			}
			
			.forum-title-content {
				display: flex;
				margin: 10px 0;
				align-items: center;
				
				img {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					margin-right: 20px;
				}
				
				div:nth-child(2) {
					flex: 1;
					
					&:last-child {
						color: #7B7B7B;						
					}
				}
				
				span {
					padding: 2px 10px;
					color: #fff;
					border-radius: 5px;
					background: #c9eb59;
				}
				
				.active {
					background: #ccc;
					color: #7B7B7B;
				}
			}
			
			.forum-title-label {
				width: 100%;
				flex-direction: row-reverse;
				display: flex;
				margin-bottom: 10px;
				
				div {
					padding: 2px 10px;
					background: #7b7b7b;
					color: #fff;
				}
			}
			
		}
		.forum-content {
				
			.forum-content-type {
				margin: 10px 0;
				color: indianred;
				font-size: 14px;
			}
			
			.forum-content-title {
				margin: 10px 0;
			}
			
			.forum-content-imgs {
				img {
					width: 100%;
					margin-bottom: 5px;
				}
			}
		}
	}
	.forum-comment {
		margin-bottom: 50px;
		
		.forum-comment-header {
			margin: 5px 0;
			padding: 5px 10px;
			display: flex;
			align-items: center;
			background: #fff;
			
			img {
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}
		}	
		
		.forum-comment-list {
			
			.forum-comment-list-item {
				background: #fff;
				display: flex;
				padding: 10px;
				border-bottom: 1px solid #EEEEEE;
				
				div:nth-child(1) {
					img {
						width: 40px;
						height: 40px;
						margin-right: 10px;
					}					
				}
				
				div:nth-child(2) {
					flex: 1;
					
					.item-title {
						color: #c9eb59;
						margin-bottom: 5px;
					}
					
					.item-date {
						color: #7B7B7B;
						margin-bottom: 5px;
					}
					
					.item-huifu {
						margin-bottom: 5px;
					}
					
					.item-item-child {
						padding: 10px;
						background: #E5E5E5;
					}
				}
			}
		}	
		
		.forum-commentMore {
			display: flex;
			justify-content: center;
			padding: 10px;
			background: #fff;
		}
	}
	
	.fixed-comment {
		position: fixed;
		bottom: 0;
		width: 100%;
		border-top: 1px solid #eee;
		display: flex;
		background: #fff;
		padding: 10px 0;
		align-items: center;
		
		.fixed-comment-value {
			padding: 0 5px;
			flex: 1;
			
			div {
				border: 1px solid #eee;
				border-radius: 5px;
				padding: 2px 5px;
				display: flex;
				justify-content: center;
				input {
					font-size: 14px;
				}
			}
		}
		
		.fixed-comment-num {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			
			div {
				align-items: center;
				display: flex;
			}
			
			img {
				width: 15px;
				height: 15px;
				margin-right: 5px;
			}
		}
	}
</style>